<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button type="primary" size="mini" class="edit-button" @click="handleEdit">编辑</el-button>
      </div>
      <div class="info-container">
        <el-row>
          <el-col :span="18">
          <div class="info-item">
            <span>用户名：</span>
            <span>{{ userInfo.username }}</span>
          </div>
          <div class="info-item">
            <span>性别：</span>
            <span>{{ userInfo.gender }}</span>
          </div>
          <div class="info-item">
            <span>注册时间：</span>
            <span>{{ userInfo.registerTime }}</span>
          </div>
          <div class="info-item">
            <span>最近登录时间：</span>
            <span>{{ userInfo.lastLoginTime }}</span>
          </div>
          <div class="info-item">
            <span>求职意向偏好：</span>
            <span>{{ userInfo.lastLoginTime }}</span>
          </div>
          <div class="info-item">
            <span>期望薪资：</span>
            <span>{{ userInfo.lastLoginTime }}</span>
          </div>

          </el-col>
          <el-col :span="6">
            <div class="info-item">
              <img :src="userInfo.avatar" alt="avatar" class="avatar">
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog
        title="编辑个人信息"
        :visible.sync="dialogVisible"
        width="30%"
        @close="Dialog"
    >
      <!-- 编辑信息的表单 -->
      <!-- 这里添加您的编辑信息表单 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Center",
  data() {
    return {
      userInfo: {
        username: 'xxx',
        gender: '-',
        registerTime: '-',
        lastLoginTime: '-',
        avatar: '-'
      },
      dialogVisible: false
    };
  },
  beforeMount() {
    let userInfo = this.getUserInfo()
    this.userInfo.username = userInfo.username
    this.userInfo.avatar = userInfo.avatar
  },
  methods: {
    handleEdit() {
      // 点击编辑按钮，打开编辑信息的弹出框
      this.dialogVisible = true;
    },
    Dialog() {
      // 关闭弹出框
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.info-container {
  margin-top: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.edit-button {
  float: right;
}

.avatar {
  width: auto;
  height: 15vh;
  border-radius: 50%;
}
</style>
